<template>
  <div class="base-table">
    <!-- 
      :row-style="{
        color: '#fff',
        fontSize: '16px',
        backgroundColor: 'transparent',
        fontWeight: '400',
      }" -->
    <slot name="handle-table"></slot>
    <el-table :data="data" :showSummary="showSummary" :show-header="showHeader"
      style="width: 100%; --el-table-border-color: none" @selection-change="selectionChange" v-bind="tableAttrConfig" :row-class-name="rowClassName">
      <el-table-column type="selection" v-if="showSelectColumn" align="center" width="60"></el-table-column>
      <el-table-column type="index" v-if="showIndexColumn" label="序号" align="center" width="80"></el-table-column>
      <template v-for="(item, index) in propsList" :key="index">
        <el-table-column v-bind="item">
          <template #default="scope">
            <!-- 作用域插槽传值 -->
            <slot :name="item.slotName" :row="scope.row">
              {{ scope.row[item.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="base-table-footer" v-if="showFooter">
      <slot name="footer">
        <el-pagination v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.size" :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizeChange"
          @current-change="currentChange" />
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(["handleSelectionChange", "update:pageInfo"]);

const props = defineProps({
  // 数据
  data: {
    type: Array,
    required: true,
  },
  total: {
    type: Number,
    default: 0,
  },
  // 列
  propsList: {
    type: Array,
    required: true,
  },
  // 显示序号
  showIndexColumn: {
    type: Boolean,
    default: false,
  },
  // 显示多选
  showSelectColumn: {
    type: Boolean,
    default: false,
  },
  // 显示统计
  showSummary: {
    type: Boolean,
    default: false,
  },
  // 显示表头
  showHeader: {
    type: Boolean,
    default: true,
  },
  // 表格标题
  title: {
    type: String,
    default: "",
  },
  // 分页器
  pageInfo: {
    type: Object,
    default: () => ({
      page: 1,
      size: 10,
    }),
  },
  // 树状表格配置
  tableAttrConfig: {
    type: Object,
    default: () => { },
  },
  // 是否显示分页
  showFooter: {
    type: Boolean,
    default: true,
  },
});

// 分页size change
const sizeChange = (size: number) => {
  emit("update:pageInfo", { ...props.pageInfo, size });
};

// 页码变化
const currentChange = (page: number) => {
  emit("update:pageInfo", { ...props.pageInfo, page });
};

// 选择事件
const selectionChange = (value: any) => {
  emit("handleSelectionChange", value);
};

const rowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 1) {
    return "active-row";
  }
  return "default-row";
}
</script>

<style lang="scss" scoped>
.base-table {
  :deep(.el-table .active-row) {
    --el-table-tr-bg-color: #0C2431;
  }

  :deep(.el-table .default-row) {
    --el-table-tr-bg-color: transparent;
  }

  :deep(.el-table__header) {
    border: none;
  }

  :deep(.el-table, .el-table__expanded-cell) {
    background-color: transparent;
  }

  // :deep(.el-table tr) {
  //   background-color: transparent !important;
  // }
  :deep(.el-table--enable-row-transition .el-table__body td, .el-table .cell) {
    background-color: transparent;
    cursor: pointer;
  }

  :deep(.el-table__row > td) {
    border: none;
  }

  .el-table::before {
    height: 0px;
  }

  :deep(.el-table thead) {
    font-size: 0.14rem;
    font-family: PingFang SC;
    font-weight: 500;
  }

  :deep(.el-table__inner-wrapper::before) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    z-index: 3;
  }

  .base-table-footer {
    margin-top: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;

    :deep(.el-pagination__total) {
      color: #fff;
    }

    :deep(.el-pagination button) {
      background-color: #184c7c;
      color: #fff;
    }

    :deep(.el-input__wrapper) {
      background: #326898;
    }

    :deep(.el-input__inner) {
      color: #fff;
    }

    :deep(.el-pagination__goto) {
      color: #ffffff;
    }

    :deep(.el-pagination__classifier) {
      color: #ffffff;
    }

    :deep(.el-pager li) {
      background-color: #184c7c;
      color: #ffffff;
    }

    :deep(.el-pager li.is-active) {
      background-color: #74beff;
      color: #ffffff;
    }
  }
}
</style>
